<template>
  <div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.thisDesigner}">
    <el-form-item v-if="!!thisField.formItemFlag && (!thisField.options.hidden || (thisDesignState === true))"
                  :label-width="labelWidth + 'px'"
                  :title="thisField.options.labelTooltip"
                  :rules="thisRules" :prop="getPropName()"
                  :class="[selected ? 'selected' : '', labelAlign, customClass, thisField.options.required ? 'required' : '']"
                  @click.stop="selectField(thisField)">
      <template #label v-if="thisField.options.labelHidden==false">
		  <span style="white-space:pre-line;">{{label}}</span>
        <span v-if="!!thisField.options.labelIconClass" class="custom-label">
          <template v-if="thisField.options.labelIconPosition === 'front'">
            <template v-if="!!thisField.options.labelTooltip">
              <el-tooltip :content="thisField.options.labelTooltip" effect="light">
			  	<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
					<component :is="thisField.options.labelIconClass" style="height: 1.1em;width: 1.1em"/>
				</el-icon>
			  </el-tooltip>{{label}}</template>
            <template v-else>
				<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
					<component :is="thisField.options.labelIconClass" style="height: 1.1em;width: 1.1em"/>
				</el-icon>
				{{label}}</template>
          </template>
          <template v-else-if="thisField.options.labelIconPosition === 'rear'">
            <template v-if="!!thisField.options.labelTooltip">
              {{label}}<el-tooltip :content="thisField.options.labelTooltip" effect="light">
				<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
					<component :is="thisField.options.labelIconClass" style="height: 1.1em;width: 1.1em"/>
				</el-icon>
			</el-tooltip></template>
            <template v-else>
			<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
					<component :is="thisField.options.labelIconClass" style="height: 1.1em;width: 1.1em"/>
				</el-icon>
			</template>
          </template>
        </span>
      </template>
      <slot></slot>
    </el-form-item>

    <template v-if="!!this.thisDesigner">
      <div class="field-action" v-if="thisDesigner.selectedId === thisField.id">
        <i :title="$t('designer.hint.selectParentWidget')"
           @click.stop="selectParentWidget(thisField)">
			<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
				<el-icon-back style="height: 1.1em;width: 1.1em"/>
			</el-icon>
		</i>
        <i v-if="!!thisParentList && (thisParentList.length > 1)" :title="$t('designer.hint.moveUpWidget')"
           @click.stop="moveUpWidget(thisField)">
			<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
				<el-icon-top style="height: 1.1em;width: 1.1em"/>
			</el-icon>
		</i>
        <i v-if="!!thisParentList && (thisParentList.length > 1)" :title="$t('designer.hint.moveDownWidget')"
           @click.stop="moveDownWidget(thisField)">
			<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
				<el-icon-bottom style="height: 1.1em;width: 1.1em"/>
			</el-icon>
		</i>
        <i :title="$t('designer.hint.remove')" @click.stop="removeFieldWidget">
			<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
				<el-icon-delete style="height: 1.1em;width: 1.1em"/>
			</el-icon>
        </i>
      </div>

      <div class="drag-handler background-opacity" v-if="thisDesigner.selectedId === thisField.id">
        <i :title="$t('designer.hint.dragHandler')">
			<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
				<sc-icon-drag-move style="height: 1.1em;width: 1.1em"/>
			</el-icon>
		</i>
        <i>{{$t(`designer.widgetLabel.${thisField.type}`)}}</i>
        <i v-if="thisField.options.hidden === true">
			<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
				<el-icon-hide style="height: 1.1em;width: 1.1em"/>
			</el-icon>
		</i>
      </div>
    </template>
  </div>
</template>

<script>
  export default {
    name: "form-item-wrapper",
    mixins: [],
    props: {
      field: Object,
      designer: Object,
      parentWidget: Object,
      parentList: Array,
      indexOfParentList: Number,
      designState: {type: Boolean,default: false},
      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
        type: Number,
        default: -1
      },
      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
        type: Number,
        default: -1
      },
      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
        type: String,
        default: ''
      },
      rules: Array,
    },
    inject: ['getFormConfig'],
    computed: {
      formConfig() {
        return this.getFormConfig()
      },
      selected() {
        return !!this.thisDesigner && this.thisField.id === this.thisDesigner.selectedId
      },

      label() {
        if (this.thisField.options.labelHidden) {
          return ''
        }
        return this.thisField.options.label
      },

      labelWidth() {
        if (this.thisField.options.labelHidden) {
          return 0
        }

        if (this.thisField.options.labelWidth) {
          return this.thisField.options.labelWidth
        }

        if (this.thisDesigner) {
          return this.thisDesigner.formConfig.labelWidth
        } else {
          return this.formConfig.labelWidth
        }
      },

      labelAlign() {
        if (this.thisField.options.labelAlign) {
          return this.thisField.options.labelAlign
        }

        if (this.thisDesigner) {
          return this.thisDesigner.formConfig.labelAlign || 'label-left-align'
        } else {
          return this.formConfig.labelAlign || 'label-left-align'
        }
      },

      customClass() {
        return this.thisField.options.customClass ? this.thisField.options.customClass.join(' ') : ''
      },

      subFormName() {
        return this.thisParentWidget ? this.thisParentWidget.options.name : ''
      },

      subFormItemFlag() {
        return this.thisParentWidget ? this.thisParentWidget.type === 'sub-form' : false
      },

    },
	  data(){
    	return{
    		thisRules:this.rules,
    		thisSubFormRowId:this.subFormRowId,
    		thisSubFormColIndex:this.subFormColIndex,
    		thisDesignState:this.designState,
			thisSubFormRowIndex:this.subFormRowIndex,
    		thisIndexOfParentList:this.indexOfParentList,
			thisParentList:this.parentList,
    		thisParentWidget:this.parentWidget,
    		thisField:this.field,
			thisDesigner:this.designer,
		}
	  },
	  watch: {
		  'rules': {
			  handler(val) {
				  if (val) {
					  this.thisRules = val
				  }
			  }
		  },
		  'subFormRowId': {
			  handler(val) {
				  if (val) {
					  this.thisSubFormRowId = val
				  }
			  }
		  },
		  'subFormColIndex': {
			  handler(val) {
				  if (val) {
					  this.thisSubFormColIndex = val
				  }
			  }
		  },
		  'designState': {
			  handler(val) {
				  if (val) {
					  this.thisDesignState = val
				  }
			  }
		  },
		  'subFormRowIndex': {
			  handler(val) {
				  if (val) {
					  this.thisSubFormRowIndex = val
				  }
			  }
		  },
		  'indexOfParentList': {
			  handler(val) {
				  if (val) {
					  this.thisIndexOfParentList = val
				  }
			  }
		  },
		  'field': {
			  handler(val) {
				  if (val) {
					  this.thisField = val
				  }
			  }
		  },
		  'designer': {
			  handler(val) {
				  if (val) {
					  this.thisDesigner = val
				  }
			  }
		  },
		  'parentWidget': {
			  handler(val) {
				  if (val) {
					  this.thisParentWidget = val
				  }
			  }
		  },
		  'parentList': {
			  handler(val) {
				  if (val) {
					  this.thisParentList = val
				  }
			  }
		  },
	  },
    created() {
      //
    },
    methods: {
      selectField(field) {
        if (this.thisDesigner) {
          this.thisDesigner.setSelected(field)
          this.thisDesigner.emitEvent('field-selected', this.thisParentWidget)  //发送选中组件的父组件对象
        }
      },

      selectParentWidget() {
        if (this.thisParentWidget) {
          this.thisDesigner.setSelected(this.thisParentWidget)
        } else {
          this.thisDesigner.clearSelected()
        }
      },

      moveUpWidget() {
        this.thisDesigner.moveUpWidget(this.thisParentList, this.thisIndexOfParentList)
        this.thisDesigner.emitHistoryChange()
      },

      moveDownWidget() {
        this.thisDesigner.moveDownWidget(this.thisParentList, this.thisIndexOfParentList)
        this.thisDesigner.emitHistoryChange()
      },

      removeFieldWidget() {
        if (this.thisParentList) {
          let nextSelected = null
          if (this.thisParentList.length === 1) {
            if (this.thisParentWidget) {
              nextSelected = this.thisParentWidget
            }
          } else if (this.thisParentList.length === (1 + this.thisIndexOfParentList)) {
            nextSelected = this.thisParentList[this.thisIndexOfParentList - 1]
          } else {
            nextSelected = this.thisParentList[this.thisIndexOfParentList + 1]
          }

          this.$nextTick(() => {
            this.thisParentList.splice(this.thisIndexOfParentList, 1)
            this.thisDesigner.setSelected(nextSelected)
            this.thisDesigner.emitHistoryChange()
          })
        }
      },

      getPropName() {
        if (this.subFormItemFlag && !this.thisDesignState) {
          return this.subFormName + "." + this.thisSubFormRowIndex + "." + this.thisField.options.name + ""
        } else {
          return this.thisField.options.name
        }
      },


    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../../../assets/formdesigner/styles/global.scss";

  .design-time-bottom-margin {
    margin-bottom: 5px;
  }
  .el-form-item{
	  margin-bottom: 0px !important;
  }
  .field-wrapper {
    position: relative;
	margin: 10px;
    .field-action{
      position: absolute;
      //bottom: -24px;
      bottom: 0;
      right: -2px;
      height: 22px;
      line-height: 22px;
      background: $--color-primary;
      z-index: 9;

      i {
        font-size: 14px;
        color: #fff;
        margin: 0 3px;
        cursor: pointer;
      }
    }

    .drag-handler {
      position: absolute;
      top: 0;
      //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
      left: -1px;
      height: 20px;
      line-height: 20px;
      //background: $--color-primary;
      z-index: 9;

      i {
        font-size: 12px;
        font-style: normal;
        color: #fff;
        margin: 4px;
        cursor: move;
      }

      &:hover {
        //opacity: 1;
        background: $--color-primary;
      }
    }
  }

  .el-form-item {
    //margin-bottom: 0 !important;
    //margin-bottom: 6px;

    //margin-top: 2px;
    position: relative;

    :deep(.el-form-item__label) {
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    :deep(.el-form-item__content) {
      //position: unset;  /* TODO: 忘了这个样式设置是为了解决什么问题？？ */
    }

    span.custom-label i {
      margin: 0 3px;
    }

    /* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
    :deep(.hide-spin-button) input::-webkit-outer-spin-button,
    :deep(.hide-spin-button) input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }

    /* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
    :deep(.hide-spin-button) input[type="number"] {
      -moz-appearance: textfield;
    }
  }

  .required :deep(.el-form-item__label)::before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
  }

  .static-content-item {
    min-height: 20px;
    display: flex;  /* 垂直居中 */
    align-items: center;  /* 垂直居中 */

    :deep(.el-divider--horizontal) {
      margin: 0;
    }
  }

  .el-form-item.selected, .static-content-item.selected {
    outline: 2px solid $--color-primary;
  }

  :deep(.label-left-align) .el-form-item__label {
    text-align: left;
    justify-content: flex-start !important;
  }

  :deep(.label-center-align) .el-form-item__label {
    text-align: center;
    justify-content: center !important;
  }

  :deep(.label-right-align) .el-form-item__label {
    text-align: right;
    justify-content: flex-end !important;
  }


</style>
